/**
 * @功能描述: 折叠面板demo
 * @author: lzn
 * @date: 2022-09-28 17:25:36
 * @version: 1.0
 */
<script setup>

</script>

<template>
  <div class="yw-collapse">
    <div class="yw-collapse-item collapse-item-active">
      <div class="yw-collapse-header">
        <div class="yw-collapse-icon">
          <svg class="yw-base-icon" aria-hidden="true">
            <use xlink:href="#g-arror-down"></use>
          </svg>
        </div>
        <span class="yw-collapse-header-text">This is panel header 1</span>
      </div>
      <div class="yw-collapse-content">
        <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
      </div>
    </div>
    <div class="yw-collapse-item">
      <div class="yw-collapse-header">
        <div class="yw-collapse-icon collapse-icon-unexpand">
          <svg class="yw-base-icon" aria-hidden="true">
            <use xlink:href="#g-arror-down"></use>
          </svg>
        </div>
        <span class="yw-collapse-header-text">This is panel header 2</span>
      </div>
    </div>
  </div>
  <div class="yw-collapse yw-collapse-icon-end yw-collapse-ghost">
    <div class="yw-collapse-item collapse-item-active">
      <div class="yw-collapse-header">
        <div class="yw-collapse-icon">
          <svg class="yw-base-icon" aria-hidden="true">
            <use xlink:href="#g-arror-down"></use>
          </svg>
        </div>
        <span class="yw-collapse-header-text">This is panel header 1</span>
      </div>
      <div class="yw-collapse-content">
        <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
      </div>
    </div>
    <div class="yw-collapse-item">
      <div class="yw-collapse-header">
        <div class="yw-collapse-icon collapse-icon-unexpand">
          <svg class="yw-base-icon" aria-hidden="true">
            <use xlink:href="#g-arror-down"></use>
          </svg>
        </div>
        <span class="yw-collapse-header-text">This is panel header 2</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.yw-collapse {
  margin-bottom: 20px;
}
</style>